<template >
  <div class="root">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="loginForm">
      <el-form-item label="账号" prop="userName">
        <el-input v-model="ruleForm.userName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
        <el-tooltip class="box-item" effect="dark" content="vx & tel：17328856570" placement="top">
          <el-button>联系我们</el-button>
        </el-tooltip>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElLoading } from "element-plus";
import { apiLogin } from "../apis/loginApi";
import { useRouter } from "vue-router";
import { useStore } from "../stores/system";
const store = useStore();
import md5 from "js-md5";
const router = useRouter();
const ruleFormRef = ref();
const ruleForm = reactive({
  userName: "",
  password: "",
});

const rules = reactive({
  userName: [
    {
      required: true,
      message: "请输入账号",
      trigger: "change",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change",
    },
  ],
});
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        text: "Loading...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        apiLogin({
          userName: ruleForm.userName,
          password: md5(ruleForm.password),
        })
          .then((res) => {
            if (res.code > 0) {
              sessionStorage.setItem("token", res.token);
              sessionStorage.setItem("userId", res.userId);
              sessionStorage.setItem("userName", res.userName);
              store.userLevel = res.role
              ElMessage({
                message: "登录成功！",
                type: "success",
              });
              store.isLogin = true;
              router.push("userCenter");
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
              });
            }
          })
          .finally(() => {
            loading.close();
          });
      }, 800);
    } else {
      return false;
    }
  });
};
</script>
<style scoped>
.el-form-item {
  width: 500px;
}

.loginForm {
  /* */
  /* background-color: aquamarine; */
  /* border-radius: 20px; */
  /* min-height: 200px; */
  /* padding: 20px; */
}

.root {
  /* flex: 1; */
  display: flex;
  background-color: white; 
  width: 100%;
  height: 90vh;
  justify-content: center;
  align-items: center;
  /* background: url('../assets/images/bg.jpg') repeat; */
}
</style>
